<template>
  <!-- // sign界面 -->
  <div id="sign">
    <h1>注 册</h1>
    <form>
      <el-input placeholder="请输入用户名" v-model="username" clearable>
      </el-input>
      <br />
      <el-input placeholder="请输入密码" v-model="password" clearable>
      </el-input>
      <br />
      <el-button type="primary" size="medium" round @click="tosign"
        >注 册</el-button
      >
      <br />
      <el-button type="text" size="small" @click="tologin">登 录</el-button>
    </form>
  </div>
</template>
<script>
import { register } from "@/api/login"; // 导入登录接口
export default {
  name: 'signList',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      username: '', // 添加一个数据属性来存储用户名
      password: '', // 添加一个数据属性来存储密码
    }
  },
  methods: {
    tosign() {
      register({ // 调用注册接口
        username: this.username, // 传递用户名
        password: this.password, // 传递密码
      }).then(res => { // 注册成功后的回调
        if (res?.data?.code === 201) { // 注册成功
          this.$message.success('注册成功') // 提示注册成功
          this.$router.push('/login') // 导航到登录界面
        } else { // 注册失败
          this.$message.error(res.data.message || '注册失败') // 提示注册失败
        }
      }).catch(err => { // 注册失败后的回调
        this.$message.error(err.message || '网络错误') // 提示网络错误
      })
    },
    tologin() {
      this.$router.push('/login') // 导航到登录界面
    }
  }
}
</script>
<style scoped>
#sign {
  width: 400px;
  margin: 200px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
#sign h1 {
  text-align: center;
  margin-bottom: 20px;
}
#sign form {
  display: flex;
  flex-direction: column;
}
#sign form input {
  margin-bottom: 20px;
}
#sign form input[type='submit'] {
  width: 100px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
}
</style>
